<!-- 角色查看 -->
<template>
    <div class="check-role">
        <div class="search-con">
            <Input @on-change="handleClear" clearable placeholder="请输入机构名" v-model="searchValue" class="searchInput"/>
            <Button @click="handleSearch" class="searchBtn" type="primary">
                <Icon custom="iconfont icon-sousuo" :size="16"/><span>搜索</span>
            </Button>
            <Button type="primary" class="addBtn" @click="addUserBtn()">添加</Button>   
        </div>
        <Table border :columns="columns" :data="orgUserData" :stripe="true" class='assign'></Table>
        <Page :total="pageTotal" :current="pageno" :page-size="pageSize" @on-change="handlePage" prev-text="上一页" next-text="下一页" />
        <Modal
            v-model="addUserModal"
            title="关联项目点"
            width="800"
            class="addUserModal"
            @on-ok="addUserSubmit()"
            @on-cancel="addUserModal = false;orgIds = []">
            <div class="addUser">
                <add-user v-if="addUserModal" :addUserOrgId='addUserOrgId' @selectedRoleUser="selectedRoleUser" :orgUserData="userOrgData"></add-user>
            </div>
        </Modal>
    </div>
</template>

<script>
import addUser from "./add-user.vue";
import { getCompanyUserOrg,addCompanyUserOrg,deleteCompanyUserOrg } from "@/api/staff";
export default {
    props:{
        orgUserData:{
            type:Array,
            default:[]
        },
        companyUserId:{
            type:Number,
            default:null
        },
        pageTotal:{
            type:Number,
            default:null
        }
    },
    data () {
        return {
            addUserOrgId:null,
            addUserModal:false,//添加员工模态框
            searchValue:'',//搜索关键字
            pageno:1,
            pageSize:10,

            orgIds:[],
            columns: [
                {
                title: "项目点名",
                key: "name",
                },
                {
                title: "创建时间",
                key: "createTime"
                },
                {
                title: "操作",
                key: "operation",
                align: 'center',
                render:(h,params)=>{
                    return h('div',[
                            h('Button',{
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                style: {
                                    color:'#4074c7',
                                    fontSize:'14px'
                                },
                                on: {
                                    click:() => {
                                        
                                    this.$confirm({
                                        headTitle:"系统提示",
                                        tip:`是否删除机构'${params.row.name}' 吗？`
                                        }).then(() => {
                                            this.deleteOrgUser(params.row.orgId,this.companyUserId);
                                        })
                                        .catch(() => {
                                            console.log('no')
                                        })
                                    }
                                }
                            },'删除')
                        ])
                }
                },
            ],
            data: [],
            userOrgData:[]
        };
    },
    watch:{
        orgUserData(newVal,oldVal){
            this.updateOrgData();
        }
    },
    mounted(){
        this.updateOrgData();
    },
    methods: {
        updateOrgData(){
            let params={
                pagesize: 999,
            };
            getCompanyUserOrg(this.companyUserId,params).then(res => {
                this.userOrgData = res.data.data.list;
            })
        },
        handleClear (e) {
            if (e.target.value === '') {

            }
        },
        handleSearch () {
            let param={
                pageno: this.pageno,
                keyword:this.searchValue,
            };
            // console.log(param);
            this.$emit('orgUser',this.companyUserId,param)
        },
        handlePage(value) {
            this.pageno = value;
            let param={
                "pageno":value,
            }
            this.$emit('orgUser',this.companyUserId,param)
        },
        addUserBtn(){
            this.addUserModal = true;
            this.addUserOrgId = this.companyUserId;
        },
        selectedRoleUser(data){
            this.orgIds = data;
        },
        addUserSubmit(){
            let data={
                orgIds: JSON.stringify(this.orgIds)
            }
            addCompanyUserOrg(this.companyUserId,data).then(res=>{
                if(res.data.code==200 || res.data.code==201 || res.data.code==204){
                    this.$emit('orgUser',this.companyUserId)
                    this.$Message.success(res.data.msg);
                }
            })
        },
        deleteOrgUser(orgId,companyUserId){
            deleteCompanyUserOrg(companyUserId,orgId).then(res=>{
                if(res.data.code==200 || res.data.code==201 || res.data.code==204){
                    this.$emit('orgUser',this.companyUserId)
                    this.$Message.success('删除成功');
                }else{
                    this.$Message.warning('删除失败')
                }
                })
        },
    },
    computed: {},
    updated(){
        //  this.getRoleUserData(this.roleId)
        // console.log(this.roleId);/
        
    },
    mounted(){
        //   console.log(this.roleId);
        //    this.getRoleUserData(this.roleId)
    },
    components: {addUser},

}

</script>
<style lang='less'>
@import "~@/less/common.less";
    .check-role{
        padding: 20px 30px;
        .search-con{
            padding-bottom: 15px;
            .searchBtn,.addBtn{
                margin-left: 10px;
                font-size: 14px;
                height: 32px;
                .icon-sousuo{
                    padding-right: 5px;
                    padding-bottom: 2px;
                }
                span{
                    vertical-align: baseline;
                }
            }
            .searchInput{
                width: 200px;
            }
        }  
    }
     .assign{
        margin-bottom: 15px;
        table{
            th,td{
                font-size: 14px;
                .ivu-btn:hover{
                    background: none;
                    color: #ed4014 !important;
                    text-decoration: underline;
                    border-color: transparent;
                }
            }
        }
    }
    .addUserModal{
        .ivu-modal-footer{
                .ivu-btn-text{
                    margin-right: 12px;
                    border: 1px solid @color-border;
                    &:hover{
                        border-color: @mainColor;
                    }
                }
            }
    }
</style>